<template>
  <div class="wrap">
    <header>
      <div class="head">
        <span @click="go()">&lt;</span>|
        <van-icon name="wap-home-o" @click="tohome" />
      </div>
      <p>详情</p>
      <div class="head1">
        <van-icon name="ellipsis" />|
        <van-icon name="circle" />
      </div>
    </header>
    <main>
      <div class="det">
        <div class="d1">
          <div class="left">
            <h5>易居房产</h5>
            <h3>{{list.name}}</h3>
            <p>
              <van-icon name="phone-circle" />
              {{list.phone}}
            </p>
            <p class="address">
              <van-icon name="location-o" />
              <span>{{list.location}}</span>
            </p>
          </div>
          <div class="right">
            <img src="../../img/易居房产.png" alt />
          </div>
        </div>
        <div class="d2">
          <van-tabs v-model="active">
            <van-tab title="卖房">
              <div class="bbb">
                <div v-for="(item,index) in lists" :key="index">
                  <div class="box">
                    <img :src="item.img" alt />
                    <div class="boc">
                      <p>{{item.introduce}}</p>
                      <div class="b1">
                        <p>
                          <span>{{item.styles}}</span>
                          <span>|</span>
                          <span>{{item.num1}}m²</span>
                        </p>
                        <span>{{item.address}}</span>
                      </div>
                      <div class="b2">
                        <p>
                          <span class="color">
                            {{item.num1}}
                            <span>万</span>
                          </span>
                          <span>|</span>
                          <span class="color1">{{item.price}}元/m²</span>
                        </p>
                        <span>2天前</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </van-tab>
            <van-tab title="租房">
              <div class="bbb">
                <div v-for="(item,index) in lists" :key="index">
                  <div class="box">
                    <img :src="item.img" alt />
                    <div class="boc">
                      <p>{{item.introduce}}</p>
                      <div class="b1">
                        <p>
                          <span>{{item.styles}}</span>
                          <span>|</span>
                          <span>{{item.num}}m²</span>
                        </p>
                        <span>{{item.address}}</span>
                      </div>
                      <div class="b2">
                        <p>
                          <span class="color">
                            {{item.num}}
                            <span>万</span>
                          </span>
                          <span>|</span>
                          <span class="color1">{{item.price}}元/m²</span>
                        </p>
                        <span>2天前</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </van-tab>
          </van-tabs>
        </div>
      </div>
    </main>
    <footer>
      <van-goods-action>
        <van-icon name="share-o" />
        <van-goods-action-button type="warning" text="在线咨询" @click="toInter()" />
        <van-goods-action-button type="danger" text="电话咨询" />
      </van-goods-action>
    </footer>
  </div>
</template>

<script>
import axios from "../../utils/request";
export default {
  data() {
    return {
      list: [],
      active: 0,
      lists: []
    };
  },
  created() {
    this.detail();
    this.getList();
  },
  methods: {
    go() {
      this.$router.go(-1);
    },
    detail() {
      axios({
        url: "/api/detail",
        method: "post",
        data: this.$route.params
      }).then(res => {
        // console.log(res);
        this.list = res.data.data;
      });
    },
    tohome() {
      this.$router.push("/");
    },

    getList() {
      axios({
        url: "/api/getList",
        method: "post"
      }).then(res => {
        // console.log(res);
        this.lists = res.data.data;
      });
    },

    toInter() {
      this.$router.push("/inter");
    }
  }
};
</script>

<style lang="scss" scoped>
.wrap {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
header {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  line-height: 50px;
  align-items: center;
  background: rgb(56, 121, 240);
  padding: 10px;
  color: #fff;
  .head {
    width: 70px;
    height: 25px;
    line-height: 30px;
    align-items: center;
    border: 1px solid #fff;
    border-radius: 30px;
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
  }
  //   p {
  //     padding-left: 25%;
  //   }
  .head1 {
    width: 70px;
    height: 25px;
    line-height: 30px;
    align-items: center;
    border: 1px solid #fff;
    border-radius: 30px;
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
  }
}
main {
  flex: 1;
  overflow-y: scroll;
  .det {
    // position: fixed;
    width: 96%;
    margin: 0 2%;
    // background: rgb(71, 129, 236);
    // height: 130px;
    .d1 {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 90%;
      margin: 10px 5%;
      height: 170px;
      border-radius: 15px;
      padding: 20px;
      //   border: 1px solid #999;
      box-shadow: 0 0 3px 3px #f1f1f1;
      background: #fff;
      .left {
        h5 {
          color: #999;
        }
        h3 {
          font-size: 22px;
          color: rgb(82, 79, 79);
          padding: 15px 5px;
        }
        p {
          display: flex;
          align-items: center;
          .van-icon {
            color: orangered;
            font-size: 18px;
          }
          font-size: 15px;
          color: #000;
        }
        .address {
          display: flex;
          align-items: center;
          padding-top: 10px;
          .van-icon {
            color: #999;
            font-size: 16px;
          }
          font-size: 13px;
          color: #333;
        }
      }
      .right {
        width: 50%;
        height: 170px;
        img {
          height: 100%;
          width: 100%;
          margin-left: 20px;
          border-radius: 0 15px 15px 0;
        }
      }
    }
    .d2 {
      // display: flex;
      align-items: center;
      // justify-content: space-between;
      padding: 15px;
      .van-tabs {
        flex-direction: column;
        .bbb {
          height: 300px;
          overflow: hidden;
          overflow-y: scroll;
          .box {
            display: flex;
            img {
              width: 115px;
              height: 90px;
              border-radius: 5px;
              margin: 10px 0;
            }
            .boc {
              padding: 10px;
              p {
                font-size: 14px;
                font-weight: bold;
              }
              .b1 {
                display: flex;
                justify-content: space-between;
                padding-top: 7px;
                p {
                  span {
                    font-size: 13.5px;
                    font-weight: normal;
                    padding-right: 8px;
                  }
                }
                span {
                  font-size: 13.5px;
                }
              }
              .b2 {
                display: flex;
                justify-content: space-between;
                padding-top: 7px;
                p {
                  span {
                    font-size: 14px;
                    font-weight: normal;
                    padding-right: 8px;
                  }
                  .color {
                    color: orangered;
                    font-weight: bold;
                    font-size: 15px;
                    span {
                      font-size: 13.5px;
                      color: #333;
                    }
                  }
                  .color1 {
                    color: #999;
                    font-size: 13px;
                  }
                }
                span {
                  font-size: 13px;
                  color: #999;
                }
              }
            }
          }
        }
      }
    }
  }
}
footer {
  width: 100%;
  border-top: 1px solid #ccc;
  .van-goods-action {
    display: flex;
    align-items: center;
    .van-icon {
      margin-right: 40%;
      margin-left: 5%;
      width: 25px;
      height: 25px;
      text-align: center;
      line-height: 25px;
      border-radius: 50%;
      color: orangered;
      background: orange;
    }
    .van-goods-action-button:nth-of-type(2) {
      margin-right: 5%;
    }
  }
}
</style>